<template>
  <div id="app">
    <div class="footer">
      <div class="contact">
        <!-- <span></span> -->
        <span>商业合作:{{ foot.business }}</span>
        <span>客服邮箱:{{ foot.email }}</span>
      </div>
      <div class="address">
        <!-- <div class="address-icon">
          <img src="../assets/imgs/dizhi.png" />
        </div> -->
        <div class="address-content">QQ群:{{ foot.address }}</div>
      </div>
      <div class="wx">
        <div class="wx-icon" @mouseenter="showImg()" @mouseleave="showImg()">
          <img src="../assets/imgs/wx.png" />
        </div>
        <div class="wx-content">移动端</div>
      </div>
      <div class="copyright">
        {{ aa
        }}<a href="https://beian.miit.gov.cn/#/Integrated/index">{{ bb }}</a
        >{{ cc }}
      </div>
      <div class="code" v-if="show">
        <div class="codeImg">
          <img src="../assets/imgs/modal.png" alt />
        </div>
        <div class="codeContent">
          <img src="../assets/imgs/ma.jpg" alt />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "nav-footer",
  data() {
    return {
      show: false,
      foot: "",
      aa: "",
      bb: "",
      cc: "",
    };
  },
  created() {
    this.$fetch(`/laiwen/foot/frontend/foot`).then((res) => {
      this.foot = res.foot;
      let str = res.foot.footer;
      // console.log(str.)
      //Copyright © 2020 南京四迭纪网络科技有限公司 苏ICP备20019077号. All rights reserved.
      let v1 = str.substring(0, 31);
      let v2 = str.substring(31, 45);
      let v3 = str.substring(45);
      this.aa = v1;
      this.bb = v2;
      this.cc = v3;
      console.log(v1, v2, v3, "ycccc");
    });
  },
  mounted() {
    this.getRem(1920, 100);
  },
  methods: {
    //展示二维码
    showImg() {
      this.show = !this.show;
    },
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

#app {
  width: 100%;
  margin-top: 0.4rem;
}
image {
  width: 100%;
  height: 100%;
}
.footer {
  width: 100%;
  height: 2.28rem;
  background: #282828;
  display: flex;
  align-items: center;
  flex-direction: column;
  position: relative;
}
.footer .contact {
  width: 4.75rem;
  height: 0.2rem;
  display: flex;
  margin-top: 0.55rem;
  /* margin: 0.55rem 0 0.1rem 0; */
  justify-content: space-between;
}
.footer .contact span {
  font-size: 0.14rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
  opacity: 1;
}
.footer .address {
  width: 5.48rem;
  height: 0.4rem;
  display: flex;
  border-radius: 0.26rem;
  background: rgba(46, 46, 47, 1);
  justify-content: center;
  align-items: center;
  margin-top: 0.1rem;
}
.footer .address .address-icon {
  width: 0.17rem;
  height: 0.24rem;
  margin-right: 0.16rem;
}
.footer .address .address-content {
  font-size: 0.14rem;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
  opacity: 1;
}
.footer .wx {
  height: 0.31rem;
  display: flex;
  align-items: center;
  margin: 0.1rem 0 0.1rem 0;
}
.footer .wx .wx-icon {
  width: 0.36rem;
  height: 0.31rem;
  margin-right: 0.1rem;
  cursor: pointer;
}
.footer .wx .wx-content {
  font-size: 0.14rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
  opacity: 1;
}

.footer .copyright {
  height: 0.2rem;
  font-size: 0.14rem;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 0.2rem;
  color: rgba(102, 102, 102, 1);
  opacity: 1;
}
.footer .code {
  position: absolute;
  width: 1rem;
  height: 1rem;
  border-radius: 0.05rem;
  top: 0.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.codeImg {
  width: 1rem;
  height: 1rem;
  position: absolute;
}
.codeContent {
  width: 0.8rem;
  height: 0.8rem;
  z-index: 1;
  margin-top: -0.11rem;
}
.codeContent img {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  object-fit: cover;
}
img {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
}
a {
  text-decoration: none;
  color: rgba(102, 102, 102, 1);
}
a:hover,
a:visited,
a:link,
a:active {
  color: rgba(102, 102, 102, 1);
}
</style>
